<template>
	<div class="home">
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">

			<!-- 头部 -->
			<div class="h_top" :style="'background-image:url(' + myApp.srcPath('home_bg.png') + ')' ">

				<div class="ht_content">

					<div class="hc_one" @click="goUrl('/Personal')">
						<!-- <img :src="myApp.srcPath('shop.png')" alt=""> -->
						<img class="p_head" v-if="userInfo.avatar == null" :src="myApp.srcPath('user-head.png')" alt="">
						<img class="p_head" v-if="userInfo.avatar != null" :src=" myApp.GetDomaiName() + userInfo.avatar" alt="">
					</div>

					<div class="hc_two">

						<!-- 已认证 -->
						<transition name="fold-left">
							
							<p class="h_shopName" v-if="userInfo.is_sh == 1">{{userInfo.sm_realname}}</p>
							
						</transition>

						<!-- 用户等级 -->
						<img v-if="userInfo.level > 0" class="p_levelIco" :src="myApp.srcPath(userInfo.level + '.png','images/vip_ico')" alt="">

						<!-- 未认证 -->
						<p class="h_shopName" v-if="userInfo.is_sh != 1" @click="goUrl('/Authentication')">申请认证</p>
					</div>

					<div class="hc_three">
					</div>

					<div class="hc_four">

						<img v-if="userInfo.sm_yyzzname != null" :src="myApp.srcPath('vip.png')" alt="">
						<span v-if="userInfo.sm_yyzzname != null">已认证</span>


						<span v-if="userInfo.sm_yyzzname == null">未认证</span>

					</div>

				</div>

				<div class="ht_bottom" :style="'background-image:url(' + myApp.srcPath('home_info.png') + ')'">

					<div class="htb_ivew">

						<div>
							<p>今日收款</p>
							<p v-if="userInfo">{{userInfo.jrsk}}</p>
							<p v-if="!userInfo" style="font-size: .42rem;">正在加载...</p>
						</div>

						<div>
							交易笔数：
							<span>{{userInfo.jybs}}</span>笔
						</div>

					</div>

					<div class="htb_ivew">

						<div>
							<p>累计收款(元)</p>
							<p v-if="userInfo">{{userInfo.ljsk}}</p>
							<p v-if="!userInfo" style="font-size: .42rem;">正在加载...</p>
						</div>

						<div class="h_ddinfo" @click="goUrl('/Product')">
							订单详情<img :src="myApp.srcPath('ding_info.png')" alt="">
						</div>
					</div>

				</div>

			</div>

			<img @click="goUrl('/Authentication')" class="h_homBanner" :src="myApp.srcPath('home_banner.png')" alt="">

			<div class="h_task">
				<div class="ht_contetn">
					<div class="lanmu" :style="'background-image:url(' + myApp.srcPath('lanmu_bg.png') + ')'">
						任务列表
					</div>
					<img @click="goWebUrl('https://www.vip.com/')" :src="myApp.srcPath('wph.png')" alt="">
					<img @click="goWebUrl('https://ims.pinduoduo.com/plus/')" :src="myApp.srcPath('pdd.png')" alt="">
					<img @click="goWebUrl('https://www.jd.com/')" :src="myApp.srcPath('jd.png')" alt="">
					<img @click="goWebUrl('https://www.taobao.com/')" :src="myApp.srcPath('tb.png')" alt="">
					<img @click="goWebUrl('https://www.ctrip.com/')" :src="myApp.srcPath('xc.png')" alt="">
					<img @click="goWebUrl('https://www.suning.com/')" :src="myApp.srcPath('sn.png')" alt="">
				</div>
			</div>

			<div class="h_member">
				<div class="hm_contetn">
					<div class="lanmu2" :style="'background-image:url(' + myApp.srcPath('lanmu_bg.png') + ')'">
						会员列表
					</div>

					<p v-if="index < 5" v-for="item,index in paidanList" :key="index">{{item.mobile}} <span>{{item.leixing}}</span> 交易<span>{{item.price}}</span>元 {{item.time}}</p>
				</div>
			</div>

		</van-pull-refresh>
	</div>
</template>

<script>
	import Vue from 'vue';
	import axios from 'axios'

	import {
		Icon,
		PullRefresh,
		Toast
	} from 'vant';

	Vue.use(PullRefresh);

	Vue.use(Icon);

	//请求
	import {
		UserInfo,
		MemberList
	} from '../serve/api.js'

	export default {
		name: 'Home',
		created() {
			
			//读取缓存数据
			// if(this.$store.state.userData != null){
				
				// this.userInfo = this.$store.state.userData
				
			// }else{

				this.getUserInfo()
				
			// }
			
			this.MemberList()

		},
		data() {

			return {
				//刷新动画是否显示
				isLoading: false,

				userInfo: "",
				
				paidanList:""

			}

		},
		methods: {
			MemberList(){
				
				let params;
				
				MemberList( params,(res) => {
					
					if(res.data.code == 1){
						
						this.paidanList = res.data.data
						
					}else{
						
						this.paidanList = ""
						
					}
					
				},(error) => {
						
					this.paidanList = ""
					
				})
				
			},
			
			goWebUrl(url){
				
				location.href = url
					
			},
			
			goUrl(url) {

				this.$router.push(url)

			},

			getUserInfo() {

				let params;
				UserInfo(params, (res) => {

					// console.log(res)

					if (res.data.code == 1) {

						this.userInfo = res.data.data
						
						this.$store.state.userData = res.data.data
						
						// console.log(this.$store.state.userData = res.data.data)
				
					}
					
					// console.log(this.userInfo)

				}, (error) => {
					
					this.$store.state.userData = null

				})

			},

			onRefresh() {

				let HomeRefresh = new Promise( (success, failure) => {
					
					let params;
					UserInfo(params, (res) => {
					
						if (res.data.code == 1) {
					
							this.userInfo = res.data.data
					
							//更新缓存数据
							this.$store.state.userData = res.data.data
							
							success();
					
						}
					
					}, (error) => {
						
						this.$store.state.userData = null
						
						failure()
					
					})
					
				});

				

				setTimeout(() => {

						HomeRefresh.then( (status) =>{
							
							Toast('刷新成功');
							
							this.isLoading = false;
							
						}, (status) => {
							
							Toast('刷新失败');
							
							this.isLoading = false;
							
						})
				
				// 	Toast('刷新成功');

				// 	this.isLoading = false;

				}, 1000);

			},
		}
	}
</script>

<style scoped="">
	.hm_contetn span{
		display: block;
		width: .9rem;
		overflow: hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		padding-left: .05rem;
	}
	
	.hm_contetn p {
		justify-content: space-between;
		margin-bottom: .2rem;
		display: flex;
		align-items: center;
	}

	.hm_contetn p:last-child {
		margin-bottom: .1rem;
	}

	.hm_contetn {
		font-size: .24rem;
		position: relative;
		padding: .75rem .3rem .3rem .3rem;
		box-sizing: border-box;
		width: 100%;
		border-radius: .2rem;
		box-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
	}

	.h_member {
		padding: .3rem;
		box-sizing: border-box;
		margin-bottom: 1.3rem;
	}

	.ht_contetn img {
		width: 100%;
	}

	.lanmu2 {
		position: absolute;
		left: 0;
		top: .15rem;
		background-size: 100%;
		width: 1.95rem !important;
		height: .38rem;
		display: flex;
		align-items: center;
		padding-left: .08rem;
		box-sizing: border-box;
		font-size: .24rem;
		color: white;
	}

	.lanmu {
		background-size: 100%;
		position: absolute;
		left: 0;
		top: .15rem;
		width: 1.95rem !important;
		height: .38rem;
		display: flex;
		align-items: center;
		padding-left: .08rem;
		box-sizing: border-box;
		font-size: .24rem;
		color: white;
	}

	.ht_contetn {
		position: relative;
		padding: .64rem .3rem .3rem .3rem;
		box-sizing: border-box;
		grid-row-gap: .2rem;
		grid-column-gap: .24rem;
		width: 100%;
		display: grid;
		grid-template-columns: 3rem 3rem;
		grid-template-rows: repeat(3, 2.8rem);
		box-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
		border-radius: .2rem;
	}

	.h_task {
		margin-top: .07rem;
		padding: 0rem 0.3rem .03rem 0.3rem;
		box-sizing: border-box;
	}

	.h_ddinfo img {
		width: .21rem;
		height: .21rem;
		margin-left: .11rem;
	}

	.h_ddinfo {
		background: #EEF5FF;
		padding: .1rem .23rem;
		border-radius: .15rem;
		color: #3573FA;
		font-size: .26rem;
	}

	.htb_ivew div:nth-child(2) span {
		font-size: .5rem;
	}

	.htb_ivew div:nth-child(2) {
		margin-top: .45rem;
		font-size: .24rem;
		margin-left: .3rem;
	}

	.htb_ivew div:nth-child(1) p:nth-child(2) {
		font-size: .42rem;
		margin-top: .22rem;
	}

	.htb_ivew div:nth-child(1) p:nth-child(1) {
		margin-top: .78rem;
		font-size: .3rem;
	}

	.htb_ivew {
		color: white;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hc_four img {
		width: .56rem;
		height: .28rem;
		margin-right: .1rem;
	}

	.hc_four {
		font-size: .28rem;
		color: #5E5E5E;
		display: flex;
		align-items: center;
		margin-left: .54rem;
	}

	.hc_three {
		/* width: .01rem; */
		height: .64rem;
		border: none;
		border-right: 2px dotted #3871FC;
		margin-left: .66rem;
	}

	.hc_two img {
		width: .35rem;
		height: .3rem;
		margin-top: .12rem;
	}

	.hc_two p {
		max-width: 1.5rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.hc_two {
		margin-left: .54rem;
		font-size: .3rem;
		color: #456091;
	}

	.hc_one img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.hc_one {
		width: 1.2rem;
		height: 1.2rem;
		border-radius: .2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		box-shadow: 0rem 0rem .4rem rgba(0,0,0,0.4);
	}

	.ht_content {
		padding: .82rem .71rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.ht_bottom {
		display: flex;
		width: 6.79rem;
		height: 3.39rem;
		background-size: 100%;
		position: absolute;
		top: 3.02rem;
		left: 50%;
		transform: translateX(-50%);
	}

	.h_top {
		width: 100%;
		height: 4.36rem;
		background-size: 100%;
		background-repeat: no-repeat;
		position: relative;
		margin-bottom: 2.47rem;
	}

	.h_item {
		width: 6.79rem;
		height: 2.65rem;
		border-radius: .1rem;
		margin: auto;
		background-repeat: no-repeat;
		background-size: 100%;
		margin-top: .59rem;
		display: flex;
		position: relative;
	}

	.h_item div {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: white;
		align-items: center;
		font-size: .3rem;
	}

	.h_item span {
		font-size: .48rem;
		margin-top: .2rem;
	}

	.h_item p {
		font-size: .28rem;
	}

	.h_solid {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1px;
		border-left: 1px dotted rgba(255, 255, 255, .5);
		height: .7rem;
		/* background-color: red; */
	}

	.h_homBanner {
		width: 100%;
	}

	.home {
		position: absolute;
		height: 100%;
		overflow-y: scroll;
	}
</style>
